<template>

    <div class="masen-index">
        <NavHeader></NavHeader>
        <div class="index-banner">
          <div class="masen-container">
            <div class="banner-warp">
              <div class="banner-warp-title">智慧服务</div>
              <div class="banner-warp-content">充分融合AI技术，突破传统客户服务模式，基于云的联络中心实现全渠道、全媒体的一站式
                智能化客户服务，可以有效降低企业成本，缩短建设周期，提升坐席工作效率，优化客户服
                务体验，提升客户满意度。</div>
              <div class="banner-warp-remark">——用实力服务每一位客户</div>
            </div>
          </div>
        </div>
        <div class="home-page-case">
          <div class="masen-container">
            <div class="home-case-main">
              <div class="case-main-left">
                <img v-lazy="'/imgs/home-page/case-info-01.png'" alt="case">
              </div>
              <div class="case-main-right">
                <div class="case-info-date">
                  2021-02-04
                </div>
                <div class="case-info-title">
                  <h4>上海银行股份有限公司</h4>
                  <p>
                    上海银行股份有限公司（以下简称“上海银行”）成立于1995年12月29日，总行位于中国上海市，
                    是上海证券交易所主板上市公司，股票代码601229。上海银行以“精品银行”为战略愿景，以“精诚至上，
                    信义立行”为核心价值观，近年来通过推进专业化经营和精细化管理，着力在中小企业...
                  </p>
                </div>
                <div class="case-info-button">
                  <a class="web-btn web-btn-page">查看详情</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="home-page-info">
          <div class="masen-container">
            <div class="masen-warp">
              <h4>智慧云联络中心</h4>
              <p>致力于帮助客户赢得商业成功，实现企业与客户的沟通的简单与高效，
                提供全渠道协同、全云化部署、智能化赋能的端到端一站式解决方案，
                打造最优质的客户体验和营销效果。
                <a href="#" >了解详情 >></a>
              </p>
            </div>
            <div class="masen-index-group">
              <div class="masen-group-item">
                <div class="group-title">
                  联络中心
                </div>
                <div class="group-content">
                  全场景、全渠道的客户联络，客户在哪里，服务和营销就做到哪里；让客户永远在对的时间、对的地点、对的方式与对的人沟通！
                </div>
                <div class="group-content-btn">
                  <a href="#" class="web-btn web-btn-unbg">了解详情</a>
                </div>
              </div>
              <div class="masen-group-item">
                <div class="group-title">
                  AI与数据分析
                </div>
                <div class="group-content">
                  专为联络中心设计的AI与大数据技术产品，提供智能语音转写、智能质检、数据透视等功能与服务，既服务天润融通系列产品，也可为第三方合作伙伴提供强大支持。
                </div>
                <div class="group-content-btn">
                  <a href="#" class="web-btn web-btn-unbg">了解详情</a>
                </div>
                <div class="group-content-border"></div>
              </div>
              <div class="masen-group-item">
                <div class="group-title">
                  通信连接
                </div>
                <div class="group-content">
                  联络中心根本目的是连接企业和客户，通信的连接与资源的管理是智慧云联络中心重要服务组成。
                </div>
                <div class="group-content-btn">
                  <a href="#" class="web-btn web-btn-unbg">了解详情</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="case-list-main">
          <div class="masen-container">
            <div class="case-list">
              <div class="case-list-item">
                <img v-lazy="'/imgs/home-page/home-case-01.png'" alt="案例1">
              </div>
              <div class="case-list-item">
                <img v-lazy="'/imgs/home-page/home-case-02.png'" alt="案例2">
              </div>
              <div class="case-list-item">
                <img v-lazy="'/imgs/home-page/home-case-03.png'" alt="案例3">
              </div>
              <div class="case-list-item">
                <img v-lazy="'/imgs/home-page/home-case-04.png'" alt="案例4">
              </div>
            </div>
            <div class="case-list">
              <div class="case-list-item">
                <img v-lazy="'/imgs/home-page/home-case-05.png'" alt="案例5">
              </div>
              <div class="case-list-item">
                <img v-lazy="'/imgs/home-page/home-case-06.png'" alt="案例6">
              </div>
              <div class="case-list-item">
                <img v-lazy="'/imgs/home-page/home-case-07.png'" alt="案例7">
              </div>
              <div class="case-list-item">
                <img v-lazy="'/imgs/home-page/home-case-08.png'" alt="案例8">
              </div>
            </div>
          </div>
        </div>
        <div class="index-footer-main">
          <div class="masen-container">
            <div class="index-footer">
              <div class="index-footer-title">
                <h4>联系我们</h4>
                <p>您可以通过以下方式与我们取得联系</p>
              </div>
              <div class="index-footer-contact">
                <div class="footer-contact-item">
                  <div class="contact-item-img">
                    <img src="/imgs/home-page/home-contact-01.png">
                  </div>
                  <div class="contact-item-information">
                    <span>电话</span>
                    <span>0371-63228219</span>
                  </div>
                </div>
                <div class="footer-contact-item">
                  <div class="contact-item-img">
                    <img src="/imgs/home-page/home-contact-02.png">
                  </div>
                  <div class="contact-item-information">
                    <span>邮件</span>
                    <span>162171261@qq.com</span>
                  </div>
                </div>
                <div class="footer-contact-item">
                  <div class="contact-item-img">
                    <img src="/imgs/home-page/home-contact-03.png">
                  </div>
                  <div class="contact-item-information">
                    <span>地址</span>
                    <span>河南省郑州市金水区花园路1907</span>
                  </div>
                </div>
                <div class="footer-contact-item">
                  <div class="contact-item-img">
                    <img src="/imgs/home-page/home-contact-04.png">
                  </div>
                  <div class="contact-item-information">
                    <span>二维码</span>
                    <span>扫描二维码更多了解我们</span>
                  </div>
                </div>
              </div>
              <div class="index-footer-information">
                <p>
                  版权所有 © 玛森 | 豫ICP备2021005144号
                </p>
              </div>
            </div>
          </div>
        </div>
    </div>

</template>

<script>
import NavHeader from './components/NavHeader'
import { getContent } from '../api/index'
export default {
  name: '',
  components: { NavHeader },
  mounted () {
    this.getContent()
  },
  methods: {
    getContent() {
      getContent().then((response) => {
        console.log(response)
      })
    }
  }
}
</script>

<style lang="scss">
  @import "../assets/scss/mixin.scss";
  @import "../assets/scss/button";
  .masen-index{
    .index-banner{
      margin-top: 5px;
      @include bgimg(100%,870px,'/imgs/header/banner-01.png');
      height: 870px;
      background-size: cover;
      .masen-container{
        height: 100%;
        .banner-warp{
          text-align: center;
          margin-top: 300px;
          color: #FFFFFF;
          padding: 0px 130px;
          .banner-warp-title{
            font-size: 60px;
          }
          .banner-warp-content{
            padding-top: 25px;
            font-size: 24px;
            text-align: left;
          }
          .banner-warp-remark{
            padding-top: 25px;
            text-align: right;
            font-size: 30px;
          }
        }
      }
    }
    .home-page-case{
      margin-top: 80px;
      .home-case-main{
        display: flex;
        .case-main-left{
          img{
            height: 365px;
            width: 580px;
          }
        }
        .case-main-right{
          margin-left: 77px;
          .case-info-date{
            color: #999999;
            margin-top: 40px;
            &:after{
              content: '';
              @include borderSet();
            }
          }
          .case-info-title{
            margin-top: 30px;
            h4{
              color: #333333;
              font-size: 18px;
            }
            p{
              margin-top: 33px;
              color: #666666;
              font-size: 14px;
            }

          }
          .case-info-button{
            margin-top: 40px;

          }
        }
      }

    }
    .home-page-info{
      @include bgimg(100%,870px,'/imgs/home-page/bg-01.png');
      background-size: cover;
      margin-top: 80px;
      .masen-warp{
        text-align: center;
        color: #FFFFFF;
        h4{
          width: 525px;
          text-align: center;
          margin: 80px auto 0px auto;
          font-size: 30px;
        }
        p{
          width: 525px;
          text-align: center;
          margin: 15px auto 0px auto;
          font-size: 14px;
          a{
            color: #ffffff;
          }
        }
      }
      .masen-index-group{
        height: 560px;
        margin: 25px auto 0px auto;
        background: #ffffff;
        display: flex;
        .masen-group-item{
          padding: 145px 75px;
          /*margin: 65px 0px;*/
          /*border-right: solid 4px #E4E4E4;*/
          width: 33%;
          color: #333333;
          position: relative;

          &:after{
            height: 449px;
            background: #E4E4E4;
            width: 4px;
            content: ' ';
            position: absolute;
            right: -4px;
            top: 56px;
          }
          &:last-child:after{
            width: 0px;
          }
          &:hover{
            background: #134B9F;
            color: #FFFFFF;
            transition: all 0.5s;
            .group-title{

            }
            .group-content{
              color: #FFFFFF;
            }
            .group-content-btn{
              display: block;
            }
          }
          .group-title{
            font-size: 33px;
            text-align: center;
          }
          .group-content{
            color: #9D9D9D;
            margin-top: 50px;
          }
          .group-content-btn{
            display: none;
            margin-top: 45px;
            text-align: center;
          }
        }

      }
    }
    .case-list-main{
      margin-top: 80px;
      background: #FAFBFC;
      .masen-container{
        .case-list{
          display: flex;
          margin-bottom: 15px;
          .case-list-item{
            display: inline-block;
            width: 25%;
            text-align: center;
            background: #ffffff;
            margin-right: 25px;
            height: 140px;
            box-shadow: 0px 0px 6px #e8e3e3;
            img{
              max-width: 250px;
              max-height: 140px;
            }
            &:last-child{
              margin-right: 0px;
            }
          }
        }
      }
    }
    .index-footer-main{
      @include bgimg(100%,870px,'/imgs/home-page/bg-02.png');
      background-size: cover;
      margin-top: 80px;
      .masen-container{
        .index-footer{
          margin-top: 80px;
          text-align: center;
          color: #FFFFFF;
          .index-footer-title{

            h4{font-size: 30px;margin-bottom: 30px}
            p{
              font-size: 14px;
            }
          }
          .index-footer-contact{
            margin-top: 120px;
            display: flex;
            .footer-contact-item{
              width: 25%;
              padding-bottom: 90px;
              .contact-item-img{
                margin: 90px auto 30px auto;
                display: flex;
                justify-content:center;
                align-items:Center;
                border: 1px solid #ffffff;
                border-radius: 80px;
                height: 80px;
                width: 80px;
                img{
                  height: 60px;
                  width: 60px;
                }
              }
              .contact-item-information{
                display: block;
                span{
                  display: block;
                  font-size: 18px;
                  color: #FFFFFF;
                  margin-bottom: 20px;
                }
              }

              &:hover{
                background-color: rgba(165,201,255,0.4);
                transition: all 0.3s;
                .contact-item-img{
                  border: 1px solid rgba(165,201,255,0);
                  transition: all 0.3s;
                  /*background-color: rgba(165,201,255,0.4);*/
                }

              }
            }
          }
          .index-footer-information{
            font-size: 12px;
            margin-top: 165px;
            p{

            }
          }
        }

      }
    }
  }

</style>
